<template>
  <div>
    <h2>轮播图预览</h2>
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <h2>轮播图管理</h2>
    <el-upload
      action="http://localhost:3000/admins/addImg"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
    >
      <!-- :auto-upload="false"
      :limit="5"
      multiple="true"
      :http-request="uploadFile"
      ref="upload"-->
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-button style="margin: 20px;" size="medium" type="success" round @click="update">上传</el-button>
  </div>
</template>

<script>
import axios from "axios";
import { request } from "../../network/request";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("admin");
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      imgUrl: ""
    };
  },
  computed:{
...mapState(['array'])
  },
  methods: {
    ...mapActions(["getPicture", "addPicture"]),
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file, fileList) {
      console.log(file, fileList);
      //   this.dialogImageUrl = file.url;
      //   this.dialogVisible = true;
    },
    uploadSuccess(file, fileList) {
      // console.log(file);
      console.log(file);
      this.imgUrl = file.filename[0];

      // console.log(this.imgUrl);
    },
    update() {
      this.addPicture({ img: this.imgUrl });
    }
  },
  created() {
    this.getPicture();
  }
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>